<template>
  <div class="test-box">
    <div class="test-wrap">
      <ul>
        <li v-for="i in list" :key="i.label" :class="{ active: i.label <= currentIndex }" @click="gridClick(i)">
          {{ i.label }}
        </li>
      </ul>
      <div v-if="hasGaming" class="test-wrap-bg">
        <span @click="refresh">刷新</span>
        <span @click="start">开始</span>
      </div>
    </div>
  </div>
  <div class="time">用时：{{ gshTime(time) }} 秒</div>
</template>

<script setup lang="ts">
const list: any = ref([]);
const currentIndex: any = ref(0);
const interval: any = ref(null);
const time: any = ref(0);
const hasGaming: any = ref(true);

// 监听是否打开任务中心
watch(
  () => currentIndex.value,
  (val, preVal) => {
    console.log(val);
    if (val === 25) {
      // 结束
      clearInterval(interval.value);
      hasGaming.value = true;
    }
  },
  { immediate: false, deep: true },
);

const initList = () => {
  list.value = [];
  currentIndex.value = 0;
  let n = 1;
  while (n <= 25) {
    list.value.push({
      label: n,
      sort: Math.random() * 0.5,
    });
    n += 1;
  }
  list.value.sort((a: any, b: any) => a.sort - b.sort);
};
initList();

const refresh = () => {
  initList();
};

const start = () => {
  initList();
  hasGaming.value = false;
  time.value = 0;
  currentIndex.value = 0;
  const tt = 10;
  interval.value = setInterval(() => {
    time.value += tt;
  }, tt);
};

const gshTime = (t: any) => {
  return (t / 1000).toFixed(2);
};

const gridClick = (i: any) => {
  if (i.label === currentIndex.value + 1) {
    currentIndex.value = i.label;
  }
  console.log(currentIndex.value);
};
</script>

<style lang="scss" scoped>
.test-box {
  display: flex;
  justify-content: center;
}
.test-wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  ul {
    width: 100vw;
    height: 100vw;
    max-width: 500px;
    max-height: 500px;
    border: 1px solid #93c7a1;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 1px;
  }
  li {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #93c7a1;
    font-size: 16px;
    &.active {
      background: #4f7a5e;
      color: #fff;
    }
  }
  .test-wrap-bg {
    width: 100vw;
    height: 100vw;
    max-width: 500px;
    max-height: 500px;
    position: absolute;
    background: rgba(1, 255, 255, 0.212);
    display: flex;
    align-items: center;
    justify-content: space-around;
    span {
      width: 40%;
      background-color: rgba(7, 151, 247, 0.9);
      color: #fff;
      text-align: center;
      height: 40px;
      line-height: 40px;
      border-radius: 40px;
      cursor: pointer;
    }
  }
}
.time {
  position: fixed;
  top: 10px;
  left: 10px;
}
</style>
